<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Vue</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>


<div class="container" id="app">

    <div v-if="books.length">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>#ID</th>
                <th>书名</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            <tr v-for="(item, index) in books">
                <th scope="row">{{item.id}}</th>
                <td>{{item.name}}</td>
                <td>{{item.price | showPrice}}</td>
                <td>
                    <button @click="decr(index)" :disabled="item.count <= 1" class="btn btn-info btn-sm">-
                    </button>
                    {{item.count}}
                    <button @click="incr(index)" :disabled="item.count >= 100" class="btn btn-info btn-sm">+
                    </button>
                </td>
                <td>
                    <button @click="remove(index)" class="btn btn-waring">删除</button>
                </td>
            </tr>

            <tr>
                <td colspan="4">总价：{{totalPrice | showPrice}}</td>
                <td colspan="3">
                    <button class="btn btn-success">提交订单</button>
                </td>
            </tr>

            </tbody>
        </table>
    </div>

    <h3 v-else>暂无数据！！！</h3>

</div>


<script src="./vue.js"></script>
<script>
    // 下面的代码可以放到单独的文件
    const app = new Vue({
        el: '#app',
        data: {
            books: [
                {id: 1, name: '计算机基础教程', price: 10, count: 1},
                {id: 2, name: '数据结构', price: 22, count: 5},
                {id: 3, name: '现代操作系统原理', price: 33, count: 6},
                {id: 4, name: '操作系统原理之哲学', price: 45, count: 9},
                {id: 5, name: 'MYSQL数据库教程', price: 56, count: 8},
                {id: 6, name: 'Golang终极教程', price: 68, count: 9},
            ]

        },
        methods: {
            incr(index) {
                this.books[index].count++;
            },
            decr(index) {
                this.books[index].count--;
            },
            remove(index) {
                this.books.splice(index, 1);
            }
        },
        computed: {
            totalPrice() {
                let totalPrice = 0.00;
                //第一种方法
                // for (let i = 0; i < this.books.length; i++) {
                //     totalPrice += this.books[i].price * this.books[i].count;
                // }
                // return totalPrice;

                //第二种方法
                // for (let i in this.books) {
                //     totalPrice += this.books[i].price * this.books[i].count;
                // }
                // return totalPrice;

                //第三种方法：
                // for (let item of this.books) {
                //     totalPrice += item.price * item.count;
                // }
                // return totalPrice;


                //第四种方法： 高阶函数  reduce
                return this.books.reduce(function (prev, book) {
                    return prev + book.price * book.count;
                }, 0);
                // return totalPrice;
            }
        },
        filters: {
            showPrice(price) {
                return '￥' + price.toFixed(2);
            }
        },

    });

    //高阶函数   复杂写法
    // const nums = [12, 34, 56, 7, 8, 8];
    // let total = nums.filter(function (n) {
    //     return n < 100;
    // }).map(function (n) {
    //     return n * 2;
    // }).reduce(function (preVal, n) {
    //     return preVal + n;
    // }, 0);
    // console.log(total);

    //高阶函数   简洁写法 (箭头函数)
    // let total = [12, 36, 56, 7, 8, 8].filter(n => n > 1).map(n => n * 2).reduce((pre, n) => pre + n);
    // console.log(total);

</script>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!--<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>-->
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>-->
</body>
</html>